<template>
  <div>
    <NestedList :list="nestedData" />
  </div>
</template>

<!-- <script>
import NestedList from './NestedList.vue'

export default {
  components: {
    NestedList
  },
  data() {
    return {
      nestedData: [
        {
          name: 'Item 1',
          children: [
            {
              name: 'Subitem 1',
              children: [
                {
                  name: 'Subsubitem 1'
                },
                {
                  name: 'Subsubitem 2'
                }
              ]
            },
            {
              name: 'Subitem 2'
            }
          ]
        },
        {
          name: 'Item 2'
        }
      ]
    }
  }
}
</script> -->
<script setup>
import { ref } from 'vue'
import NestedList from './NestedList.vue'
defineOptions({
  name: 'RecursiveComponent'
})
const nestedData = ref([
  {
    name: 'Item 1',
    children: [
      {
        name: 'Subitem 1',
        children: [
          {
            name: 'Subsubitem 1'
          },
          {
            name: 'Subsubitem 2'
          }
        ]
      },
      {
        name: 'Subitem 2'
      }
    ]
  },
  {
    name: 'Item 2'
  }
])
</script>
